<template>
  <view class="group-members-container">
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <u-icon name="arrow-left" size="32" color="#fff" @click="navigateBack"></u-icon>
      <text class="title">房间搭子</text>
      <u-icon name="add" size="32" color="#fff" @click="inviteMembers"></u-icon>
    </view>

    <!-- 成员列表 -->
    <view class="members-grid">
      <!-- 已加入成员 -->
      <view class="member-item" v-for="(member, index) in members" :key="index">
        <u-avatar :src="member.avatar" size="120"></u-avatar>
        <text class="member-name">{{ member.name }}</text>
        <text class="member-age" v-if="member.age">{{ member.age }}岁</text>
      </view>

      <!-- 邀请按钮 -->
      <view class="invite-item" @click="inviteMembers">
        <view class="invite-icon">
          <u-icon name="plus" size="40" color="#8e24aa"></u-icon>
        </view>
        <text class="invite-text">邀请搭子</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chatId: '',
      members: [
        {
          id: '1',
          name: 'oiw',
          avatar: '/static/icons/default-avatar.png',
          age: 27
        },
        // 占位成员，实际项目中从API获取
        {
          id: '2',
          name: '',
          avatar: '/static/icons/default-avatar.png'
        },
        {
          id: '3',
          name: '',
          avatar: '/static/icons/default-avatar.png'
        },
        {
          id: '4',
          name: '',
          avatar: '/static/icons/default-avatar.png'
        },
        {
          id: '5',
          name: '',
          avatar: '/static/icons/default-avatar.png'
        },
        {
          id: '6',
          name: '',
          avatar: '/static/icons/default-avatar.png'
        },
        {
          id: '7',
          name: '',
          avatar: '/static/icons/default-avatar.png'
        },
        {
          id: '8',
          name: '',
          avatar: '/static/icons/default-avatar.png'
        }
      ]
    };
  },
  onLoad(options) {
    this.chatId = options.id;
    this.getGroupMembers();
  },
  methods: {
    navigateBack() {
      uni.navigateBack();
    },
    async getGroupMembers() {
      // 实际项目中调用API获取群成员列表
      // try {
      //   const res = await getGroupMembers(this.chatId);
      //   if (res.data && res.data.code === 1) {
      //     this.members = res.data.data;
      //   }
      // } catch (error) {
      //   uni.showToast({ title: '获取成员列表失败', icon: 'none' });
      // }
    },
    inviteMembers() {
      // 跳转到邀请页面
      uni.navigateTo({
        url: '/pages/chat/invite-members?id=' + this.chatId
      });
    }
  }
};
</script>

<style scoped>
.group-members-container {
  min-height: 100vh;
  background-color: #2d2d2d;
  color: #fff;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background-color: #2d2d2d;
  border-bottom: 1px solid #444;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32rpx;
  padding: 40rpx 24rpx;
}

.member-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.member-name {
  margin-top: 16rpx;
  font-size: 28rpx;
}

.member-age {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #888;
  background-color: #333;
  padding: 2rpx 16rpx;
  border-radius: 16rpx;
}

.invite-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.invite-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.invite-text {
  margin-top: 16rpx;
  font-size: 28rpx;
  color: #8e24aa;
}
</style>